/* ==========================================================
   What Drives Us: The Values Behind Every Line of Code
   File: wwwroot/css/leadership-values.css
   Used by: Views/Partials/blocklist/Components/leadershipValuesBlock.cshtml
   ========================================================== */
.ld-val {
  --lv-navy: #14256b;
  --lv-gutter: 6.8vw;
  --lv-ease-out: cubic-bezier(.16, 1, .3, 1);

  box-sizing: border-box;
  width: 100%;
  padding: clamp(40px, 4.2vw, 110px) var(--lv-gutter) clamp(40px, 4.6vw, 120px);
  background: #fff;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--lv-navy);
  -webkit-font-smoothing: antialiased;
}
.ld-val *, .ld-val *::before, .ld-val *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- heading ---------- */
.ld-val__head { margin-bottom: clamp(22px, 2.3vw, 60px); }
.ld-val__eyebrow {
  margin-bottom: clamp(12px, 1.5vw, 38px);
  font-size: clamp(11px, .85vw, 22px);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ld-val__heading {
  font-size: clamp(24px, 2.3vw, 60px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--lv-navy);
}
.ld-val__intro {
  max-width: 41em;
  margin-top: clamp(10px, 1vw, 26px);
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(13px, .95vw, 24px);
  line-height: 1.55;
  color: var(--lv-navy);
}

/* ---------- cards ---------- */
.ld-val__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 28px);
}
.ld-val__card {
  position: relative;
  isolation: isolate;
  min-height: clamp(220px, 19.5vw, 500px);
  padding: clamp(20px, 2.1vw, 54px) clamp(18px, 1.55vw, 40px);
  background: #f9f9fa;
  outline: none;
  cursor: default;
  overflow: hidden;
}
/* the orange glow: fades in on the active card (no layout change, so it never jumps) */
.ld-val__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(165deg, #ffb27a 0%, #ffc596 30%, #ffe3cc 68%, #fff6ef 100%);
  opacity: 0;
  transform: scale(1.04);
  transform-origin: top center;
  transition: opacity .7s ease, transform 1s var(--lv-ease-out);
}
.ld-val__card.is-active::before { opacity: 1; transform: none; }
.ld-val__card:focus-visible { box-shadow: inset 0 0 0 2px #ff9a45; }

.ld-val__title {
  margin-bottom: clamp(10px, 1vw, 26px);
  font-size: clamp(16px, 1.3vw, 34px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--lv-navy);
  transition: transform .7s var(--lv-ease-out);
}
.ld-val__text {
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(13px, .9vw, 23px);
  line-height: 1.6;
  color: var(--lv-navy);
  transition: transform .8s var(--lv-ease-out);
}
.ld-val__card.is-active .ld-val__title { transform: translateY(-3px); }
.ld-val__card.is-active .ld-val__text { transform: translateY(-2px); }

/* ---------- entrance ---------- */
.ld-val.js-reveal .ld-val__fx { opacity: 0; transform: translateY(22px); }
.ld-val.js-reveal.is-visible .ld-val__fx {
  opacity: 1;
  transform: none;
  transition: opacity .9s ease var(--fd, 0s), transform 1.1s var(--lv-ease-out) var(--fd, 0s);
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .ld-val { --lv-gutter: 32px; } }
@media (max-width: 900px) {
  .ld-val { --lv-gutter: 24px; }
  .ld-val__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-val__card { min-height: 200px; }
}
@media (max-width: 560px) {
  .ld-val { --lv-gutter: 20px; }
  .ld-val__grid { grid-template-columns: 1fr; }
  .ld-val__card { min-height: 0; }
}